<template>
  <el-dialog
    title="添加分享语"
    :visible.sync="dialogData.isShow"
    width="480px"
    :before-close="labelHandleClose"
  >
    <div class="form-box">
      <el-form
        ref="ruleForm"
        :rules="rules"
        :model="ruleForm"
        label-width="80px"
        class="addForm"
      >
        <el-form-item label="类型:">
          <el-radio-group v-model="ruleForm.type">
            <el-radio
              v-for="item in typeList"
              :key="item.dictValue"
              :label="item.dictValue"
            >
              {{ item.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="学院:">
          <el-select v-model="ruleForm.collegeId" placeholder="请选择">
            <el-option
              v-for="item in collegeList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标题:" prop="title">
          <el-input
            v-model="ruleForm.title"
            type="textarea"
            :rows="7"
            resize="none"
            :placeholder="`请输入标题(最多输入${maxLength}个字符)`"
            :maxlength="maxLength"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表单部分 -->
    <span slot="footer" class="dialog-footer">
      <el-button type="success" plain @click="cancelLabel">取 消</el-button>
      <el-button
        type="success"
        :loading="loading"
        @click="confirmLabel('ruleForm')"
        >确认</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { addShareWordRequest } from '@/api/shareWordManagement/shareWordAPI'
import { getKeyValue } from '@/api/system/parameter'
export default {
  props: ['dialogData'],
  data() {
    return {
      loading: false,
      // 表单数据
      ruleForm: {
        type: '', // 1图文  2小视频
        collegeId: '', // 学院
        title: '' // 表单域内容
      },
      typeList: [], // 类型
      collegeList: [], // 学院数据
      maxLength: '', // 标题最大长度
      rules: {
        title: { required: true, message: '标题不能为空', trigger: 'blur' }
      }
    }
  },
  mounted() {
    this.getFilterList()
    this.getTitleLength()
  },
  methods: {
    /* 获取筛选条件 */
    async getFilterList() {
      // 获取分享语筛选条件-类型
      let typeList = await sysNormalDisable(
        'sys_share_language_type',
        'shareType'
      )
      this.typeList = [...typeList]
      this.ruleForm.type = this.typeList[0].dictValue
      // 获取分享语筛选条件-学院
      let collegeList = await sysNormalDisable(
        'sys_share_college',
        'shareCollegeType'
      )
      this.collegeList = [...collegeList]
      this.ruleForm.collegeId = this.collegeList[0].dictValue
    },
    /* 获取标题长度 */
    getTitleLength() {
      let params = {
        configKey: 'shareLanguageTitleLength'
      }
      getKeyValue(params, (response) => {
        this.maxLength = response
      })
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.ruleForm.title = ''
      this.dialogData.isShow = false
    },
    /* 确认提交 */
    confirmLabel(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          let url = '/share-languages'
          let params = { ...this.ruleForm }
          addShareWordRequest(
            params,
            (response) => {
              this.$emit('refresh')
              this.cancelLabel()
              this.loading = false
            },
            (response) => {
              this.loading = false
              this.$message({
                message: '新增失败，' + response.message,
                type: 'warning'
              })
            }
          )
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.addForm {
  .el-select {
    width: 500px;
  }
  .el-textarea {
    width: 350px;
  }
}
</style>
